<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <h1>我是根组件</h1>
      <hr />
      <!-- 3. 直接在需要使用组件的模板中以标签的形式存在       （单双标签都可） -->
      <App></App>
    </div>
    <script>
      // 组件嵌套
      const Header = Vue.extend({
        name: "Header",
        template: `<h2>我是Header组件</h2>`,
      });

      // 1.创建组件    Vue.extend
      const App = Vue.extend({
        name: "App",
        data() {
          return {
            count: 1,
          };
        },
        components: {
          Header,
        },
        template: `
        <div>我是App组件，我的count值是：{{count}}, <Header> </Header>   </div>
        `,
      });

      const vm = new Vue({
        el: "#app",
        data() {
          return {};
        },
        // 2.注册组件
        components: {
          App,
        },
      });
    </script>
  </body>
</html>
